<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
	<%
	String albumuuid = request.getAttribute("albumuuid")==null?"":request.getAttribute("albumuuid").toString();
	String albumname = request.getAttribute("albumname")==null?"":request.getAttribute("albumname").toString();
	%>
	<style type="text/css">
    
    [id^="example101a-"]{
        cursor:pointer;
        font-family: sans-serif;
        color:#3c3c3c;
        border: 0px solid #3c3c3c;
        border-radius: 15px;
        background: #ffffff;
        
        text-decoration: none;
        width:700px;
        height:500px;
        padding:10px 0px 5px 15px;
        margin:10px;
        font-size:20px;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    }
    [id^="example101b-"]{
        cursor:pointer;
        font-family: sans-serif;
        color:#3c3c3c;
        border: 1px solid #3c3c3c;
        border-radius: 15px;
        background: #fcfcfc;
        
        text-decoration: none;
        width:650px;
        height:500px;
        padding:10px 0px 5px 15px;
        margin:0px;
        font-size:20px;
        box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
    }
    [id^="example101b-"]{
        text-decoration: none;
        display:block;
        position:relative;
        float:left;
        width:36px;
        height:36px;
        font-size:12px;
        padding:4px 0px 0px 4px;
        margin:2px;
    }
    [id^="example101a-"]:not([id*=prev]):not([id*=next]):not([id*=first]):not([id*=last]) {
        display:block;
        position:absolute;
    }
    [id^="example101b-"]:hover, [id^="example101b-"].active{
        background: #92e8ff;
    }
    [id^="example101a-"]{
        cursor: default;
    }
    #mycounter {
        text-decoration: none;
        display:block;
        position:relative;
        float:left;
        font-size:12px;
        padding:5px 0px 5px 10px;
        margin:6px 0px;
    }
    </style>

	<script src="<%=request.getContextPath()%>/include/album/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/include/album/mg.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/include/album/jquery.easing.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/include/album/jquery.transform.light.js" type="text/javascript"></script>
	
	<script language="javascript">
	function popUp(){
			J('#createalbum').dialog({ id: 'd1', title: '创建相册', cover:true,page: '<%=request.getContextPath()%>/album?method=newAlbum', link: true, btns: false, width: 600, height: 450 }); 
	}
	
    function AutoResizeImage(maxWidth,maxHeight,objImg){
		var img = new Image();
		img.src = objImg.src;
		var hRatio;
		var wRatio;
		var Ratio = 1;
		var w = img.width;
		var h = img.height;
		wRatio = maxWidth / w;
		hRatio = maxHeight / h;
		if (maxWidth ==0 && maxHeight==0){
		Ratio = 1;
		}else if (maxWidth==0){//
		if (hRatio<1) Ratio = hRatio;
		}else if (maxHeight==0){
		if (wRatio<1) Ratio = wRatio;
		}else if (wRatio<1 || hRatio<1){
		Ratio = (wRatio<=hRatio?wRatio:hRatio);
		}
		if (Ratio<1){
		w = w * Ratio;
		h = h * Ratio;
		}
		objImg.height = h;
		objImg.width = w;
	}
	</script>
    

	<table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" width="100%">
    
    <tr><td height="30"><a href="<%=request.getContextPath()%>/album" >相册</a> >> <a href="<%=request.getContextPath()%>/album?method=albumPhoto&albumuuid=<%=albumuuid%>"><%=albumname%></a></td></tr>
    <tr>
    	<td height="600">
        <table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" width="100%">
        <tr>
        	<td height="600">
            <div id="example101a">
                <div style="text-align:center;position:relative;">
                	<%
					int imgcount = 0;
					%>
                	<sap:PhotoList albumuuid="<%=albumuuid%>">
                    <sap:Photo>
                    <div id="example101a-<%=imgcount%>" style="text-align:center;position:relative;"><img align="absmiddle" src="<%=request.getContextPath()%>/servlet/FileUploadManagerServlet?method=showImage&imgPath=<sap:write property='PI_IMAGE' />" lowsrc="<%=request.getContextPath()%>/servlet/FileUploadManagerServlet?method=showImage&imgPath=<sap:write property='PI_SMALLIMAGE' />" onload="AutoResizeImage(700,500,this)"></div>
                    </sap:Photo>
                    <%imgcount++;%>
                    </sap:PhotoList>
                </div>
            </div>
            <div style="clear:both;height:550px;"></div>
            
            <div id="example101b">
                <div>
                    <div id="example101b-first">First</div>
                    <div id="example101b-prev">Prev</div>
                    <%int radiocount=0;%>
                    <sap:PhotoList albumuuid="<%=albumuuid%>">
                    <sap:Photo>
                    <%//for(int radiocount=0;radiocount<imgcount;radiocount++){%>
                    	<div id="example101b-<%=radiocount%>"><img align="absmiddle" src="<%=request.getContextPath()%>/servlet/FileUploadManagerServlet?method=showImage&imgPath=<sap:write property='PI_SMALLIMAGE' />" height="32" width="32"></div>
                    <%//}%>
                    </sap:Photo>
                    <%radiocount++;%>
                    </sap:PhotoList>
                    
                    <div id="example101b-next">Next</div>
                    <div id="example101b-last">Last</div>
                    <div id="mycounter">Page X of X</div>
                </div>
            </div>
            <div style="clear:both;"></div>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    
<script type="text/javascript">

var reference = "example101a";
$('[id^="'+reference+'-"]:not([id*=prev]):not([id*=next]):not([id*=first]):not([id*=last])').css("display","block").css("position","absolute").css("opacity",0).css("z-index","0");

this[reference+"_click"] = this[reference+"_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){
	var mypath=$("#"+reference+"-"+deactivated); 
	mypath.css("z-index","0");
	mypath.stop().animate({opacity:0},{queue:true, duration:1600, specialEasing: {opacity: 'easeOutExpo'}});
	var mypath=$("#"+reference+"-"+activated);
	mypath.css("z-index","2").css("opacity",0);
	mypath.stop().animate({opacity:1},{queue:true, duration:1600, specialEasing: {opacity: 'easeOutExpo'}});
	// set counter numbers
	$("#mycounter").html("Page "+(parseFloat(activated)+1)+" of "+$('[id^="'+reference+'-"]:not([id*=prev]):not([id*=next]):not([id*=first]):not([id*=last])').length);
}

mg_init({
	reference:"example101a",
	activated:[0],
	click:{
		max_activated:1
	}
});

//

var reference = "example101b";

this[reference+"_click"] = this[reference+"_init"] = function(reference, activated, deactivated, prevsteps, nextsteps, multiple, cycle){
	$("#"+reference+"-"+deactivated).removeClass("active");
	$("#"+reference+"-"+activated).addClass("active");
}
this[reference+"_prevhide"] = function(reference, prevsteps){
	$("#"+reference+"-prev").css("visibility","hidden");
	$("#"+reference+"-first").css("visibility","hidden");
}
this[reference+"_prevshow"] = function(reference, prevsteps){
	$("#"+reference+"-prev").css("visibility","visible");
	$("#"+reference+"-first").css("visibility","visible");
}
this[reference+"_nexthide"] = function(reference, nextsteps){
	$("#"+reference+"-next").css("visibility","hidden");
	$("#"+reference+"-last").css("visibility","hidden");
}
this[reference+"_nextshow"] = function(reference, nextsteps){
	$("#"+reference+"-next").css("visibility","visible");
	$("#"+reference+"-last").css("visibility","visible");
}

mg_init({
	reference:"example101b",
	activated:[0],
	click:{
		interactive:true,
		linked:["example101a"],
		max_activated:1,
		less:2, plus:2
	}
});

</script>